<template>
	<view class="coldpaly_coin">
		<uni-nav-bar title="我的酷玩币" color="#fff" leftIcon="left" backgroundColor="#F0DBB0;" :border="false"
			:statusBar="true" :fixed="true" titleClass="custom-title">
			<template v-slot:left>
				<view @click="$common.back()">
					<image src="/static/images/back.png" style="width: 32rpx; height: 32rpx" mode="scaleToFill" />
				</view>
			</template>
		</uni-nav-bar>
		<view class="header-box">
			<view class="left">2346</view>
			<image style="width: 188rpx;" mode="widthFix" src="/static/images/Frame 1410104930.png" />
		</view>
		<view class="content-box">
			<view class="header">
				<view :class="tabActive == 0 ? 'tab-a' : 'tab'" @click="tabClick(0)">全部</view>
				<view :class="tabActive == 1 ? 'tab-a' : 'tab'" @click="tabClick(1)">收入</view>
				<view :class="tabActive == 2 ? 'tab-a' : 'tab'" @click="tabClick(2)">支出</view>
			</view>
			<view class="list-box">
				<view class="item" v-for="index in 15" :key="index">
					<view class="img">
						<image style="width: 68rpx;" mode="widthFix" src="/static/images/Frame 1410104930.png" />
					</view>
					<view class="center">
						<view class="name">商品名商品名商品名商品商品名商品名商品名商品</view>
						<view class="time">2024-03-06 09:36:39</view>
					</view>
					<view class="right">
						<view :class="index % 2 == 0 ?'tag-y': 'tag-r'">处理中</view>
						<view :class="index % 2 == 0 ? 'num-a' : 'num'">{{index % 2 == 0 ? '+' : '-'}}66</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="carryBtn" @click="carryClick">提币</view>
				<view class="fullBtn" @click="rechargeClick">充值</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabActive: 0,
			}
		},
		onLoad() {
			this.req({
				url:""
			})
		},
		methods: {
			tabClick(value) {
				this.tabActive = value;
			},
			carryClick() {
				uni.navigateTo({
					url: '/package/mine/carryCoin'
				})
			},
			rechargeClick() {
				uni.navigateTo({
					url: '/package/mine/recharge'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 定义自定义标题样式 */
	.uni-nav-bar-text {
		span {
			font-weight: bold !important;
			/* 加粗 */
			color: white !important;
			/* 白色文字 */
			text-shadow: 0 0 1px #000,
				/* 基础描边 */
				0 0 1px #000, 0 0 1px #000,
				-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
		}
	}

	.coldpaly_coin {
		width: 100%;
		height: 100vh;
		background-color: #F0DBB0;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

		.header-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 40rpx;
			padding-right: 72rpx;

			.left {
				font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
				font-weight: bold;
				font-size: 80rpx;
				color: #4080E0;
				text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
					1px 1px 0 #000;
				/* 黑色描边 */
			}
		}

		.content-box {
			flex: 1;
			height: 70%;
			width: calc(100% - 30rpx);
			display: flex;
			flex-direction: column;
			background: #FFF2D8;
			border-radius: 24rpx 24rpx 0 0;
			padding: 40rpx;

			.header {
				display: flex;
				align-items: center;

				.tab {
					padding: 10rpx 20rpx;
					background-color: #ffffff;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}

				.tab-a {
					padding: 10rpx 20rpx;
					background-color: #F36058;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #ffffff;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}
			}

			.list-box {
				flex: 1;
				margin-top: 40rpx;
				overflow-y: scroll;

				.item {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.img {
						width: 88rpx;
						height: 88rpx;
						border: 10rpx solid #ffffff;
						border-radius: 50rpx;
					}

					.center {
						width: 60%;
						padding: 0 30rpx;

						.name {
							white-space: nowrap;
							/* 防止文本换行 */
							overflow: hidden;
							/* 隐藏溢出的内容 */
							text-overflow: ellipsis;
							/* 溢出内容显示为省略号 */
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
						}

						.time {
							margin-top: 10rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: rgba(0, 0, 0, 0.6);
						}
					}

					.right {
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.tag-y {
							padding: 10rpx 20rpx;
							background: #FFB74B;
							border-radius: 12rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;
						}

						.tag-r {
							padding: 10rpx 20rpx;
							background: #F36058;
							border-radius: 12rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #ffffff;
						}

						.num-a {
							margin-top: 10rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #ED8D34;
						}

						.num {
							margin-top: 10rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 0;

				.carryBtn {
					width: 280rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #FFB74B;
					border: 4rpx solid #000000;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #ffffff;
					text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
						2px 2px 0 #000;
				}

				.fullBtn {
					width: 280rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #F36058;
					border: 4rpx solid #000000;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #ffffff;
					text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
						2px 2px 0 #000;
				}
			}
		}
	}
</style>